<template>
  <el-dialog :visible.sync="dialogVisible" append-to-body :close-on-click-modal="false">
    <span slot="title" class="dialog-title">
      <el-input @keyup.enter.native="getPoint" v-model="addressStr" size="mini" style="width: 450px;" placeholder="请选择或输入地址" clearable>
            <el-button slot="append" icon="el-icon-search" @click="getPoint"></el-button>
      </el-input>
    </span>
    <div class="amap-wrapper">
      <el-amap ref="myMap" class="amap-box" :vid="'amap-vue'" @init="init" :center="center" :zoom="zoom" :events="events">
        <el-amap-marker :position="center" :draggable="true" :events="markEvents" :label="markerLabel"></el-amap-marker>
      </el-amap>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="postPoint">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
  export default {
    name: 'getPosition',
    data() {
      return {
        dialogVisible: false, //显示弹窗
        center: [110.0660951, 41.0404915], //地图中心点
        zoom: 14, //地图缩放比例
        addressStr: '', //选中点的地址
        events: {
          click: this.getPointInfo //点击事件，获取点击位置的信息
        },
        markEvents: {
          dragend: this.getPointInfo //拖拽事件，获取拖拽后位置的信息
        }
      }
    },
    props: ['address'],
    computed: {
      //为marker添加label标签
      markerLabel() {
        return this.addressStr ? {
          offset: [-80, -25],
          content: `<div style="cursor:pointer;">${this.addressStr}</div>`
        } : {}
      }
    },
    methods: {
      //初始化，显示地图
      init() {
        if (this.address) {
          this.addressStr = this.address
          this.getPoint()
        }
        this.dialogVisible = true
      },
      //地图初始化，未使用
      mapInit(o) {
        this.map = this.$refs.myMap.$$getInstance()
      },
      //点击地图更新坐标和地址
      getPointInfo(e) {
        this.getAddress(e.lnglat.lng, e.lnglat.lat)
      },
      //根据地址获取经纬度坐标
      getPoint() {
        let _this = this
        AMap.plugin('AMap.PlaceSearch', function () {
          var placeSearch = new AMap.PlaceSearch();
          //高德地图服务
          placeSearch.search(_this.addressStr, function (status, result) {
            if (status == 'complete') {
              if (result.poiList.pois.length > 0) {
                _this.center = [result.poiList.pois[0].location.lng, result.poiList.pois[0].location.lat]
              }
            }
          })
        })
      },
      //根据经纬度坐标获取地址
      getAddress(lng, lat) {
        let _this = this
        _this.$nextTick(() => {
            AMap.plugin('AMap.Geocoder', function () {
              var gc = new AMap.Geocoder({
                radius: 1000,
                extensions: 'all'
              })
              //高德地图服务
              gc.getAddress([lng, lat], (status, rs) => {
                if (rs && rs.regeocode) {
                  _this.addressStr = rs.regeocode.formattedAddress
                }
              })
            })
            this.center = [lng, lat]
        })
      },
      //向父级提交数据
      postPoint() {
        if (this.addressStr !== '') {
          this.$emit(
            'mapInfo',
            this.addressStr
          )
          this.dialogVisible = false
        } else {
          this.$message({
            message: '请选取位置!',
            type: 'warning'
          })
        }
      }
    }
  }

</script>
<style lang="scss">
  .amap-wrapper {
    width: 100%;
    height: 600px;
    .amap-marker-label{
      border: 1px solid #ccc;
      background:#1890ff;
      color:#fff;
    }
  }
</style>
